<template>
    <!-- 抬头 -->
    <PageTitle classify="宠物科-医师展示" /> <!--注意更改动态标题-->

    <!-- 内容区 -->
    <div class="content">
        <!--选择器 -->

        <div class="selector">
            <img src="@/assets/images/aboutDoctorPage/zuobiao_yiyuan.png">
            <span>医院筛选</span>
            <span class="hosipital">{{ hosipitalSelector }}</span>

        </div>
        <hr>
        <!-- 信息卡 -->
        <div class="scrollable-content">
            <docCard />
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import PageTitle from '@/components/pageTitle/pageTitle.vue';

import docCard from './components/doctorInformation_docCard.vue';

const hosipitalSelector = ref('重庆萌济医院');




</script>

<style lang="less" scoped>
.content {
    background: #C0DF7C3F;
    width: 100%;
    height: 627px;
    border-radius: 0 25px 0 0;
    position: relative;

    .selector {
        position: absolute;
        left: 11.25px;
        top: 7.5px;
        width: 355px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #0000003F;
        display: flex;
        /* 子元素底部对齐 */
        align-items: center;
        z-index: 2;

        img {
            width: 27px;
        }

        span {
            /** 文本1 */
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 20.12px;
            color: rgba(0, 0, 0, 1);
            margin-left: 3px;
            margin-right: 7.25px;
        }

        .hosipital {
            /** 文本1 */
            font-size: 10px;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
        }
    }


    hr {
        position: absolute;
        top: 41.5px;
        width: 355px;
        color: #678C18;
        left: 12.25px;
        z-index: 2;
    }

    .scrollable-content {
        position: absolute;
        top: 45px;
        overflow-y: auto;
        border-radius: 5px;
        height: 627px;

        /* 隐藏滚动条 */
        &::-webkit-scrollbar {
            display: none;
        }


        scrollbar-width: none;
    }
}
</style>